<template>
  <div class="div">
    <!-- 头部导航 -->
    <header class="header">
      <div>
        <div class="IndexSearchContainer">
          <i></i>
          <span>搜索您心怡的产品</span>
          <i class="SearchBtns">搜索</i>
        </div>
        <div class="loadAppContainer">
          <img src="../assets/clm/headergf.png" alt="" />
          <span>官方APP</span>
        </div>
      </div>
    </header>
    <!-- 热搜 -->
    <div class="hotWordsContainer clearfix">
      <span class="fl hotWordsContainerTitle">热搜：</span>
      <ul class="fl clearfix">
        <li class="fl">零食</li>
        <li class="fl">油</li>
        <li class="fl">米</li>
        <li class="fl">大闸蟹</li>
        <li class="fl">水果</li>
        <li class="fl">特产</li>
      </ul>
    </div>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in Datas" :key="index">
        <img :src="item.image" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 分类导航 -->
    <div class="navBarOutterContainer">
      <ul class="navBar clearfix">
        <li class="fl" v-for="(item, index) in Datas1" :key="index">
          <a href=""><img :src="item.image" alt="" /></a>
          <span>{{ item.imageName }}</span>
        </li>
      </ul>
    </div>
    <!-- 满减优惠 -->

    <!-- 今日特惠 -->
    <div class="newProductOutterContainer">
      <div class="newProduct">
        <img
          class="titleImage"
          src="https://fkgou-images.oss-cn-qingdao.aliyuncs.com/BCenter/time%3D1576477071146%26id%3Ddaa0c0b9-d7c7-2dff-a47f-1cd92cde4bea.png?OSSAccessKeyId=LTAIHv7U1m8yTCrg&Expires=1000001576477070&Signature=tAxuFzhC23k5loSm1jJ6HsCbQ%2FY%3D"
          alt=""
        />
        <ul class="newProductList clearfix">
          <li class="fl" v-for="(item, index) in Datas2" :key="index">
            <div class="imgBox">
              <img :src="item.goodsImage" alt="" />
            </div>
            <div class="newBottom">
              <p class="newProductTitle">
                <span class="newPrice">￥{{ item.goodsPrice }}</span>
              </p>
              <p class="newProductPrice">
                <span class="oldPrice">￥{{ item.goodsMarketPrice }}</span>
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 限时购 -->
    <div class="newModalContainer">
      <div class="newModalInnerContainer clearfix">
        <img src="../assets/clm/flgy.gif" alt="" class="fl newModalInnerTitleImage typeDataImage"/>
        <div class="fl newModalInnerLeftContainer clearfix">
          <img src="../assets/clm/xsg.png" alt="" class="fl newModalInnerLeftContainerHeaderImage typeDataImage"/>
          <div class="fl leftItemsContainer indexItemsContainer">
            <img src="../assets/clm/xsgl.jpeg" alt="" />
            <p class="leftItemsPrice">￥21.80</p>
            <del class="leftItemsOldPrice">￥27.80</del>
          </div>
          <div class="fl rightItemsContainer indexItemsContainer">
            <img src="../assets/clm/xsgr.jpeg" alt="" />
            <p class="leftItemsPrice">￥88.00</p>
            <del class="leftItemsOldPrice">￥129.00</del>
          </div>
        </div>
        <div class="fl newModalInnerRightContainer">
          <div>
            <img src="../assets/clm/xfxp.png" alt="" />
          </div>
          <div class="borderContainer">
            <img src="../assets/clm/xfyx.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Home",
  data() {
    return {
      Datas: [], //轮播数据包
      Datas1: [], //分类导航数据包
      Datas2: [], //今日特惠数据包
    };
  },
  created() {
    let url1 =
      "https://www.fkgou.com/mallms/app/home/mobconfig/query?platForm=2";
    axios.get(url1).then((res) => {
      this.Datas = res.data.data[0].mbTplLayoutDatas; //轮播数据包
      this.Datas1 = res.data.data[1].mbTplLayoutDatas; //分类导航数据包
      this.Datas2 = res.data.data[2].mbTplLayoutDatas; //今日特惠数据包
      console.log(res.data.data[3].mbTplLayoutDatas);
    });
  },
};
</script>

<style src="../assets/css/MyHome.css"></style>
<style lang="less" scoped></style>
